import React, { Component, Fragment } from 'react';
import { Button, Row, Form, Icon, Input } from 'antd';
import styles from './styles/loginform.less';
import { formatMessage } from 'umi/locale';

const FormItem = Form.Item

class LoginForm extends Component {

  handleOk = () => {
    const { dispatch, form } = this.props
    const { validateFieldsAndScroll } = form
    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return false;
      }
      dispatch({
        type: 'login/login',
        payload: values
      }
      );
    })
  }

  render () {
    const { form, loading } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Fragment>
        <form>
          <FormItem hasFeedback>
            {getFieldDecorator('username', {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'signin.username' })
                },
              ],
            })(
              <Input
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                onPressEnter={this.handleOk}
                autoComplete="off"
                placeholder={formatMessage({ id: 'signin.username' })}
              />
            )}
          </FormItem>
          <FormItem hasFeedback>
            {getFieldDecorator('password', {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'signin.password' })
                },
              ],
            })(
              <Input
                type="password"
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                onPressEnter={this.handleOk}
                placeholder={formatMessage({ id: 'signin.password' })}
              />
            )}
          </FormItem>
          <Row>
            <Button
              type="primary"
              onClick={this.handleOk}
              loading={loading.effects['login/login']}
              block
            >
              {formatMessage({ id: 'signin.button' })}
            </Button>
          </Row>
        </form>
      </Fragment>
    )
  }
}
export default Form.create()(LoginForm);

